<template>
    <view>
      <!-- 遮罩层 -->
      <view v-if="visible" class="overlay" @click="closePopup('mask')"></view>
  
      <!-- 弹出框 -->
      <transition name="slide-fade">
        <view v-if="visible" class="popup">
          <view class="popup-content">
            <slot></slot> <!-- 插槽，用来放入自定义内容 -->
            <!-- <button @click="closePopup">关闭</button> -->
          </view>
        </view>
      </transition>
    </view>
  </template>
  
  <script>
  export default {
    props: {
			/**
			 * 遮罩是否可点击关闭
			 */
			maskClick:{
				type: Boolean,
				default: true
			},
		},
    data() {
      return {
        visible: false, // 控制弹出框的显示与隐藏
      };
    },
    methods: {
      // 显示弹出框
      showPopup() {
        this.visible = true;
      },
      // 关闭弹出框
      closePopup(type) {
        if (type === 'mask' && !this.maskClick) return
        this.visible = false;
      },
    },
  };
  </script>
  
  <style scoped>
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    z-index: 99;
  }
  
  .popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    z-index: 100;
  }
  
  .popup-content {
    /* padding: 20px; */
  }
  
  button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007AFF;
    color: white;
    border: none;
    border-radius: 5px;
  }
  
  /* 添加过渡动画样式 */
  .slide-fade-enter-active,
  .slide-fade-leave-active {
    transition: all 0.3s ease-out;
  }
  
  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateY(100%);
    opacity: 0;
  }
  </style>
  
  